<template>
  <div>
    <Personinfo style="height: 50px;"></Personinfo>
    <Logox></Logox>
    <menux></menux>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/StudyVideo' }">培训测评</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/StudyVideo' }">培新课程</el-breadcrumb-item>
      </el-breadcrumb>
        <h1>建党100周年XXX某某学习视频1</h1>
        <video :preload="preload"
               :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
          <source :src="videoSrc" type="video/mp4">
        </video>
          <br/>
        <span>建党100周年XXX某某学习视频1</span>
    </el-main>
    <el-footer>
      <el-row :gutter="20">
        <el-divider></el-divider>
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import menux from '../menux'
import Logox from '../Logox'
import Personinfo from "../Personinfo";
import Video from  'video.js'
// import VideoMP4File from './../assets/demo.mp4'
import videoPng from "./../assets/video.png"


export default {
  name: "StudyVideo",
  components: {Video, menux,Logox,footerx,Personinfo},
  data (){
    return {
      // video_mp4_url:VideoMP4File,
      // video_image_url:videoPng,
      // videoSrc: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
      videoSrc: './static/demo.mp4',
      videoImg: videoPng,
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
      height: '100%', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: true
    }
  }
}
</script>

<style scoped>
.el-main{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
</style>